<template>
  <svg
    version="1.1"
    class="v-lengend-preview"
    xmlns="http://www.w3.org/2000/svg"
    :width="width"
    :height="height"
  >
    <rect
      v-if="representAs !== 'linetype'"
      :x="borderWidth / 2"
      :y="borderWidth / 2"
      :width="width - borderWidth"
      :height="height - borderWidth"
      :fill="fillColor || 'transparent'"
      :stroke="strokeColor && strokeColor != 'transparent' ? strokeColor : '#000'"
      :stroke-width="borderWidth"
      :stroke-dasharray="lineStyle?.lineStyle || ''"
    />
    <text
      v-if="representAs === 'rectangle' && fillColor != 'transparent' && showText"
      x="50%"
      y="50%"
      :fill="textColor || 'transparent'"
      style="text-anchor: middle; dominant-baseline: middle"
    >
      {{ text }}
    </text>
    style=""
    <line
      v-if="representAs === 'linetype'"
      x1="5%"
      y1="12"
      y2="12"
      x2="95%"
      :stroke="strokeColor && strokeColor != 'transparent' ? strokeColor : '#000'"
      :stroke-width="borderWidth"
      :stroke-dasharray="lineStyle?.lineStyle"
    />
  </svg>
</template>

<script lang="ts" setup>
import { computed } from "vue";

interface Props {
  width: number;
  height: number;
  text?: string;
  showText?: boolean;
  fillColor?: string;
  strokeColor?: string;
  textColor?: string;
  lineWidth?: string;
  lineStyle?: LineStyle;
  representAs?: string;
}

interface LineStyle {
  startArrow?: string;
  endArrow?: string;
  lineStyle?: "solid" | "dashed" | "dotted" | "dottedLine";
}

const props = withDefaults(defineProps<Props>(), {
  showText: true,
  text: "未命名",
  fillColor: "transparent",
  strokeColor: "transparent",
  textColor: "transparent",
  lineWidth: "0",
  representAs: "rectangle"
});

const borderWidth = computed(() => {
  return props.lineWidth && props.lineWidth != "0" ? parseInt(props.lineWidth) : 1;
});
</script>

<style lang="scss">
.v-lengend-preview {
  .text {
    position: absolute;
    bottom: 11px;
    right: 6px;
  }
}
</style>
